// 详情页接口
var vipName = getCookie('username');
function getInfo(){
    console.log('goodsId');

    let goodsId = location.search.split('=')[1];
    $.get("../php/phpe/getGoodsInfo.php?goodsId="+goodsId,function(data){
        let goods = JSON.parse(data);   
        let htmlSrc = `
            <div class="img-left">
            <div id="img-box">
                <div class="glass-less"></div>
                <img src="../${goods.goodsImg}" class="img-small">
            </div>
        </div>
        <div class="produnt-put">
            <!-- 放大镜 -->
            <div class="glass">
                <img src="../${goods.goodsImg}" class="img-big">
            </div>
            <h2>"${goods.goodsName}"</h2>
            <p class="sale-desc">
                <font color="#ff4a00">
                    「全版本闪降100元;购机享6期免息;付款前1000名赠价值99元生生不息果冻包;华夏银行信用卡分期最高可减60元」
                </font>
                天玑1100年度旗舰芯/VC液冷散热/120Hz旗舰变速金刚屏/67W闪充5000mAh大电池/JBL立体声双扬声器/UFS 3.1/6400万A三摄/多功能NFC3.0/旗舰级设计艺术感工艺
            </p>
            <p class="company-info">
                小米自营
            </p>
            <div class="price-info">
                <span>
                    ${goods.goodsPrice}元
                    <del>${goods.beiyong4}元</del>
                </span>
            </div>
            <div class="line"></div>
            <div class="activity-box">
                <div class="flow-box">
                    <span class="flow-tag">赠完即止</span>
                    <span class="flow-name">赠生生不息果冻包</span>
                </div>
            </div>
            <!-- 地址 -->
            <div class="address-con">
                <div class="product-address">
                    <span class="iconfont icon-geren"></span>
                    <div class="address-box">
                        <div class="address-info">
                            <span>北京</span>
                            <span>北京市</span>
                            <span>海定区</span>
                            <span>清河街道</span>
                        </div>
                        <a href="javascript:;" class="edit"></a>
                    </div>
                    <div class="info">
                        <span>有现货</span>
                    </div>
                </div>
            </div>
            <!-- 选择 -->
            <div class="buy-option">
                <!-- 选择版本 -->
                <div class="buy-box-child">
                    <div class="option-box">
                        <div class="title">选择版本</div>
                        <ul class="clearfix banben">
                            <li class="active">
                                <a href="javascript:;">6GB+128GB</a>
                            </li>
                            <li>
                                <a href="javascript:;">8GB+128GB</a>
                            </li>
                            <li>
                                <a href="javascript:;">8GB+256GB</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 选择颜色 -->
                <div class="buy-box-child">
                    <div class="option-box">
                        <div class="title">选择颜色</div>
                        <ul class="clearfix yanse">
                            <li class="active">
                                <a href="javascript:;">幻青</a>
                            </li>
                            <li>
                                <a href="javascript:;">月瞆</a>
                            </li>
                            <li>
                                <a href="javascript:;">星纱</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 保护 -->
            <div class="service-box">
                <div class="servise-item-box">
                    <div class="title">
                        选择小米提供的意外保护
                        <a href="javascript:;" class="_blank">了解意外保护 ></a>
                    </div>
                    <ul>
                        <li>
                            <span class="icone">
                                <i class="itepcu"></i>
                            </span>
                            <img src="../img/h1.png">
                            <div class="box">
                                <h3>意外保障服务
                                    <em>意外损免费修</em>
                                </h3>
                                <div class="desc">1年1次意外损坏 官方原厂 免费维修</div>
                                <div class="agreement-box">
                                    <input type="checkbox" class="icon-check">
                                    我已阅读
                                    <a href="javascript:;" class="_buleck">
                                        服务条款
                                        <span>|</span>
                                    </a>
                                    <a href="javascript:;" class="_buleck">常见问题</a>
                                </div>
                                <div class="price">199元</div>
                            </div>
                        </li>
                        <li>
                            <span class="icone">
                                <i class="itepcu"></i>
                            </span>
                            <img src="../img/h1.png">
                            <div class="box">
                                <h3>意外保障服务
                                    <em>意外损免费修</em>
                                </h3>
                                <div class="desc">1年1次意外损坏 官方原厂 免费维修</div>
                                <div class="agreement-box">
                                    <input type="checkbox" class="icon-check">
                                    我已阅读
                                    <a href="javascript:;" class="_buleck">
                                        服务条款
                                        <span>|</span>
                                    </a>
                                    <a href="javascript:;" class="_buleck">常见问题</a>
                                </div>
                                <div class="price">199元</div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 价格 -->
            <div class="selected-list">
                <ul>
                    <li>
                    ${goods.goodsName} ${goods.beiyong2}${goods.beiyong1}
                        <span>
                        ${goods.goodsPrice}元
                            <del>${goods.beiyong4}</del>
                        </span>
                    </li>
                </ul>
                <div class="total-price">总计：${goods.goodsPrice}元</div>
            </div>
            <!-- 结算 -->
            <div class="btn-box">
                <div class="sale-btn" >
                    <span class="btn-primary">加入购物车</span>
                </div>
                <div class="favorite-btn">
                    <a href="javascript:;" class="btn-like">喜欢</a>
                </div>
            </div>
            <!-- 信息 -->
            <div class="after-sale">
                <span>
                    <a href="javascript:;" class="support">小米自营</a>
                </span>
                <span>
                    <a href="javascript:;" class="support">小米发货</a>
                </span>
                <span>
                    <a href="javascript:;" class="support">7天无理由退货</a>
                </span>
                <span>
                    <a href="javascript:;" class="support">运费说明</a>
                </span>
                <span>
                    <a href="javascript:;" class="support">企业信息</a>
                </span>
                <span>
                    <a href="javascript:;" class="support">7天价格保护</a>
                </span>
            </div>
        </div>
            `
             $('.product-box').html(htmlSrc)
             fangda()
             tianjia()
    })
       
    }
$(function(){
    getInfo()
})

// 版本选择
// 颜色选择
$('.clearfix li').on('click',function(){
    $(this).addClass('active').siblings('li').removeClass('active');
})

// 导航栏选项卡

$('.bar').hover(function(){
    $(this).css('color','#ff6700');
    $('.bar-xuan').eq($(this).index()).css({
        'display':'block'
    })
},function(){
    $(this).css('color','')
    $('.bar-xuan').eq($(this).index()).css({
        'display':'none'
    })
})
$('.control').hover(function(){
    $('.bar-xuan').eq($(this).index()).css({
        'display':'none'
    })
})
// 轮播图上的nav的选项卡
$('.category_item').hover(function(){
    $(this).css('background','#ff6700')
    $('.item-div').eq($(this).index()).css({
        'visibility':'visible'
    })
    $('.view').css({
        display:'none'
    })
},function(){
    $(this).css('background','')
    $('.item-div').eq($(this).index()).css({
        'visibility':'hidden'
    })
    $('.view').css({
        display:'block'
    })
})

$(window).on('scroll',function(){
    // 概述页吸顶效果
    if ($(window).scrollTop()>=200) {
        $('#xm-product').css({
            'display':'block'
        })
    }else{
        $('#xm-product').css({
            'display':'none'
        })
    }
    //顶部显示
    if ($(window).scrollTop()<=800) {
        $('.home-tool').css({
            bottom:'-32px'
        })
        $('.home-din').css({
            'visibility':'hidden'
        })
    }else{
        $('.home-tool').css({
            bottom:'70px'
        })
        $('.home-din').css({
            'visibility':'visible'
        })
    }
})
// 回到顶部
$('.home-din').on('click',function(){
    $('html,body').animate({
        scrollTop:0
    },10)
})
// 下载APP
$('.site').hover(function(){
    $('.left_xia').slideDown()
},function(){
    $('.left_xia').slideUp()
})
// 跳转到主页
$('.shangchen').on('click',function(){
    location.href = 'xiaomi.html'
})
// 跳转到购物车
$('.topbanright1').on('click',function(){
    location.href = 'shopping.html'
})
$('.shopps').on('click',function(){
    location.href = 'shopping.html'
})

// 放大镜
function fangda(){
class Banner{
    constructor(oBox,oLess,oGlass,oImg,oImgs){
        var that = this
        this.oBox = oBox;
        this.oLess = oLess;
        this.oGlass = oGlass;
        this.oImg = oImg;
        this.oImgs = oImgs
    }
    bindesEvent(){
        //移入移出隐藏
        this.oBox.onmouseover = ()=>{
            this.oLess.style.display = 'block'
            this.oGlass.style.display = 'block'
        }
        this.oBox.onmouseout = ()=>{
            this.oLess.style.display = 'none'
            this.oGlass.style.display = 'none'
        }
        //遮罩移动
        this.oLess.onmousemove = (e)=>{
            this.move(e)
        }
    }
    // 移动
    move(e){
        // 获取鼠标位置的左和上偏移量
        var x = e.pageX - this.oBox.offsetLeft
        var y = e.pageY - this.oBox.offsetTop
        // 处理让光标放到中心
        var xx = x - this.oLess.offsetWidth / 2
        var yy = y - this.oLess.offsetHeight / 2
        // 设置边界限制
        if (xx<=0) {
            xx = 0
        }
        if (xx>=this.oBox.clientWidth-this.oLess.offsetWidth) {
            xx = this.oBox.clientWidth-this.oLess.offsetWidth
        }
        if (yy<=0) {
            yy = 0
        }
        if (yy>=this.oBox.clientHeight-this.oLess.offsetHeight) {
            yy = this.oBox.clientHeight-this.oLess.offsetHeight
        }
        this.oLess.style.left = xx + 'px'
        this.oLess.style.top = yy + 'px'
        // 计算比例
        var bilix = (this.oImg.offsetWidth - this.oGlass.offsetWidth) / (this.oBox.clientWidth-this.oLess.offsetWidth)
        var biliy = (this.oImg.offsetHeight - this.oGlass.offsetHeight) / (this.oBox.clientHeight-this.oLess.offsetHeight)
        // 小图所在位置
        var big_x = bilix*this.oLess.offsetLeft
        var big_y = biliy*this.oLess.offsetTop
        // 大图移动位置
        this.oImg.style.left = -big_x + 'px'
        this.oImg.style.top  = -big_y + 'px'
    }
}
var oBox = document.querySelector('#img-box')
var oLess = document.querySelector('.glass-less')
var oGlass = document.querySelector('.glass')
var oImg = document.querySelector('.img-big')
var oImgs = document.querySelector('.img-small')
var b = new Banner(oBox,oLess,oGlass,oImg,oImgs)
b.bindesEvent()

}
var index = 1;
function tianjia(){
    var goodsIg = location.search.split('=')[1];
    // 添加到购物车
    $('.btn-primary').on('click',function(){
        $.ajax({
            url:'../php/phpe/addShoppingCart.php',
            type:'POST',
            data:{
                vipName: vipName,
                goodsId:goodsIg,
                goodsCount: index
            },
            success(res){
                console.log(res);
                if (res=='1') {
                    location.href = '../html/tianjia.html'
                }
            }
        })
    })
}





